<template>
  <div>
    <el-card style="margin: 20px 0px" shadow="hover">
      <CategorySelect @getcategoryId="getcategoryId" :isShowTable="!this.isShowTable" />
    </el-card>
    <div v-show="Scene == 0">

      <el-card style="margin: 20px 0px" shadow="hover">
        <el-button type="primary" icon="el-icon-plus" style="margin: 20px 0px" :disabled="!category3Id" @click="addSpu">
          添加SPU</el-button>
        <el-table stripe style="width: 100%" border :data="records">
          <el-table-column type="index" label="序号" width="180" align="center">
          </el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="180" align="center">
          </el-table-column>
          <el-table-column prop="description" label="SPU属性" align="center">
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="{ row }">
              <el-tooltip class="item" effect="light" content="添加SKU" placement="top">
                <el-button type="success" icon="el-icon-plus" size="mini" @click="addSku(row)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="修改SPU" placement="top">
                <el-button type="warning" icon="el-icon-edit" size="mini" @click="goedit(row)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="查看SKu列表" placement="top">
                <el-button type="info" icon="el-icon-info" size="mini" @click="showSku(row)"></el-button>

              </el-tooltip>
              <el-tooltip class="item" effect="light" content="删除SPU" placement="top">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSpu(row)"></el-button>
              </el-tooltip>
              <el-dialog :title="`${spu.spuName}的列表`" :visible.sync="centerDialogVisible" width="60%" center>
                <el-table stripe border :data="skuList" style="width: 100%" v-loading="loading">
                  <el-table-column prop="skuName" label="Sku名称" width="180" align="center">
                  </el-table-column>
                  <el-table-column prop="price" label="价格(元)" width="180" align="center">
                  </el-table-column>
                  <el-table-column prop="weight" label="重量(克)" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="默认图片" align="center">
                    <template slot-scope="{row}">
                      <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
                    </template>
                  </el-table-column>
                </el-table>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>


        <el-pagination background style="margin-top: 20px; text-align: center" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="page" :page-sizes="[3, 5, 10]" :page-size="limit"
          layout=" prev, pager, next, jumper, ->, sizes,total" :total="total">
        </el-pagination>
      </el-card>

    </div>

    <SpuForm v-show="Scene == 1" @changeInfo="changeInfo" @change="change" ref="Spu"></SpuForm>
    <SkuForm v-show="Scene == 2" @changerSKu="changerSKu" ref="Sku"></SkuForm>

  </div>
</template>

<script>
import SkuForm from "@/views/Product/Spu/SkuForm"
import SpuForm from "@/views/Product/Spu/SpuForm"
export default {
  name: 'Spu',
  data() {
    return {
      category1Id: "",
      category2Id: "",
      category3Id: "",
      isShowTable: true,
      page: 1,
      limit: 3,
      total: 0,
      records: [],
      total: 0,
      Scene: 0,
      centerDialogVisible: false,
      spu: {},
      skuList: [],
      loading: true,
    }
  },
  components: {
    SkuForm,
    SpuForm
  },
  methods: {
    getcategoryId({ categoryId, level }) {
      if (level == 1) {
        this.category1Id = categoryId;
        this.category2Id = "";
        this.category3Id = "";
      } else if (level == 2) {
        this.category2Id = categoryId;
        this.category3Id = "";
      } else {
        //三级分类的id有了，可以发请求了
        this.category3Id = categoryId;
        this.getSpuList()

      }
    },
    async getSpuList() {
      let { page, limit, category3Id } = this
      let result = await this.$API.reqSpuList(page, limit, category3Id)
      if (result.code == 200) {
        this.records = result.data.records
        this.total = result.data.total
      }
    },
    handleSizeChange(limit) {
      this.limit = limit
      this.getSpuList()
    },
    handleCurrentChange(pager) {
      this.page = pager
      this.getSpuList()
    },
    change(Scene) {
      this.Scene = Scene
      this.$message.info('取消成功')
      this.isShowTable = true
      this.getSpuList()
    },
    goedit(row) {
      this.Scene = 1
      this.$refs.Spu.initSpuData(row)
    },
    changeInfo({ Scene, flag }) {
      this.Scene = 0
      if (flag == '修改') {
        this.$message.success('修改SPU成功')
        this.isShowTable = true

        this.getSpuList()
      } else {
        this.$message.success('新增SPU成功')
        this.isShowTable = true

        this.getSpuList()
      }
    },
    addSpu() {
      this.Scene = 1
      this.isShowTable = false
      this.$refs.Spu.getData()
    },
    async deleteSpu(row) {
      let result = await this.$API.reqDeleteSpu(row.id)
      if (result.code == 200) {
        this.$message.success('删除SPU成功')
        this.getSpuList(this.records.length > 1 ? this.page : this.page = this.page - 1)
      }
    },
    async showSku(spu) {
      this.centerDialogVisible = true
      this.spu = spu
      let result = await this.$API.reqSkuList(spu.id)
      if (result.code == 200) {
        this.skuList = result.data
        this.loading = false
      }
    },
    changerSKu(Scene) {
      this.Scene = Scene
      
      this.isShowTable = true
      this.getSpuList()
    },
    addSku(row) {
      this.Scene = 2
      this.isShowTable = false

      this.$refs.Sku.getSkuInfo(this.category1Id, this.category2Id, row)
    }
  }
}
</script>

<style>
</style>